<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ msg }}
    <h2>{{web.title}}</h2>
    <h2>{{web.url}}</h2>
    <h2>{{number}}</h2>
    <h2>{{web.user}}</h2>

    <button v-on:click="edit">修改</button><br>
    <button @click="add(10,10)">修改</button>
</div>
<script type="module">
    import {createApp,reactive,ref} from "./vue.esm-browser.js";

    createApp({
        setup(){
            const number=ref(10)
            number.value=20
            const web = reactive({
                title:"浙工贸",
                url:"zjitc.net",
                user: 0
            })

            web.title="浙江工贸职业技术学院"

            const edit=()=>{
                web.url=www.zjitc.net
            }

            const add=(a,b)=>{
                web.user+=a+b;
            }

            return{
                msg:"success",
                web,
                number,
                edit,
                add
            }
        }
    }).mount("#app")
</script>
</body>
</html>